.container-1 {
    /*横向滑动容器*/
    text-align: center;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    /*position: fixed;*/
    /*top: 0;*/
}

.container-1::-webkit-scrollbar {
    display: none;
}

.container-2 {
    /*纵向滑动容器*/
    width: 25vw;
    height: 60vh;
    overflow-y: scroll;
}

.item-1 {
    flex: 0 0 auto;
    margin-right: 5px;
    background-color: #000000;
    color: #ffffff;
    display: inline-block;
    white-space: nowrap;
    line-height: 60px;
    height: 8vh;
}

.item {
    flex: 0 0 auto;
    margin: 10px;
    background-color: #0a0a0a;
    display: inline-block;
    white-space: nowrap;
    line-height: 60px;
    height: 15vh;
    width: 10vw;
}

.nav-bottom {
    display: flex;
    justify-content: space-around; /* 平均分配空间 */
    align-items: center; /* 垂直居中对齐 */
    position: fixed;
    bottom: 0;
    /*导航栏高度*/
    height: 8vh;
    /*导航栏颜色*/
    background-color: rgb(255, 255, 255);
    /*阴影 x偏移 y偏移 模糊半径 颜色*/
    box-shadow: 0 -1px 1px #bbbbbb;
    color: #0066ff;
    /*边框弧度 左上 右上 右下 左下*/
    border-radius: 16px 16px 0 0;
    width: 100%;
    text-align: center;
    left: 0;
    z-index: 99;
}

.nav-ui {
    position: relative;
    display: inline-block;
    height: 100%;
    /*ui容器大小*/
    width: 16vw;
    /*容器外边距 上 左 下 右*/
    margin: 0 1vw 0 1vw;
}

.nav-ui:active {
    background-color: #ececec;
}


.nav-bottom div .ui-inner {
    /*绝对居中*/
    position: absolute;
    display: block;
    width: calc(8px + 3vh);
    height: calc(8px + 3vh);
    /*top为50%时绝对纵向居中*/
    top: 38%;
    /*left为50%时绝对横向居中*/
    left: 50%;
    /*需要给谁居中，就给谁设置-50% x y */
    transform: translate(-50%, -50%);
}

.nav-bottom div p {
    position: absolute;
    display: block;
    width: 100%;
    font-size: calc(8px + 1vh);
    top: calc(16px + 4vh);
    margin-top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.nav-bottom div a {
    width: calc(8px + 7vh);
    height: calc(8px + 8vh);
    top: 0;
    transform: translate(-50%, 0);
}

a:active {
    color: rgba(0, 0, 0, 0);
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

div {
    border-radius: 16px;
    border: none;
}

.nav-top {
    position: fixed;
    top: 0;
    height: 8vh;
    background-color: rgb(255, 255, 255);
    width: 100%;
    /*边框弧度 左上 右上 右下 左下*/
    border-radius: 0 0 16px 16px;
    /*阴影 x偏移 y偏移 模糊半径 颜色*/
    box-shadow: 0 1px 1px #bbbbbb;
    color: #0066ff;
    left: 0;
    z-index: 99;
}

.nav-top .left-text {
    position: absolute;
    left: 2vw;
    top: 2vh;
    text-align: left;
    /*font-family: cursive;*/
    font-size: calc(14px + 1.4vh);
}

.nav-top .center-text {
    position: relative;
    top: 50%;
    text-align: center;
    /*font-family: cursive;*/
    font-size: calc(8px + 2vh);
    color: black;
}

#nav-background {
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -99;
}

body {
    background-color: #f1f1f1;
}

.left-list-outer {
    position: absolute;
    width: 20vw;
    height: 90vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.right-list-outer {
    right: 2vw;
    position: absolute;
    width: 74vw;
    height: 90vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.left-list {
    box-shadow: 0 1px 1px #bbbbbb;
    position: relative;
    width: 100%;
    height: 8vh;
    background-color: #ffffff;
    margin-bottom: 2vh;
}

.left-list:active {
    background-color: #ececec;
}

.right-list {
    box-shadow: 0 1px 1px #bbbbbb;
    position: relative;
    width: 100%;
    height: 19vh;
    background-color: #ffffff;
    margin-bottom: 2vh;
}


.list-box {
    box-shadow: 0 1px 1px #bbbbbb;
    position: relative;
    width: 100%;
    background-color: #ffffff;
    margin-bottom: 5px;
}

.list-box p {
    font-size: calc(8px + 2vh);
    display: contents;
}


.left-list p {
    font-size: calc(8px + 2vh);
    display: inline;
}

.left-text-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}

.right-text-box {
    position: absolute;
    left: 5vw;
    top: 2vh;
    text-align: left;
    font-size: calc(8px + 2vh);
}

p {
    margin: 0;
}

.btn-addToCart {
    position: absolute;
    width: 17vw;
    height: 6vh;
    top: 3vh;
    right: 5vw;
    border: none;
    background-color: #0066ff;
    color: white;
    border-radius: 19px;
    font-size: calc(8px + 1.1vh);

}

.btn-addToCart:active {
    background-color: #4c87ff;
}

.btn-inCart {
    position: absolute;
    width: 6vh;
    height: 6vh;
    top: 3vh;
    right: 3vw;
    border: none;
    background-color: #0066ff;
    color: white;
    border-radius: 28px;
    font-size: calc(8px + 2vh);
}

.btn-inCart:active {
    background-color: #4c87ff;
}

.center-text {
    position: absolute;
    font-size: calc(8px + 2vh);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}